﻿.b-page-progress {
    .b-page-progress-indicator {
        @each $name, $value in $theme-colors {
            $color: $value;

            &.b-page-progress-indicator-#{$name} {
                background-color: $color;
            }
        }
    }
}

.progress {
    position: relative;
}

.progress-indeterminate,
.progress-linear {
    .progress-bar {
        &:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background-color: inherit;
            animation: animation-indeterminate 2s ease infinite;
        }

        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            background-color: inherit;
            animation: animation-indeterminate-short 2s ease 0.5s infinite;
        }
    }
}

@keyframes animation-indeterminate {
    0% {
        left: -5%;
        width: 5%;
    }

    100% {
        left: 130%;
        width: 100%;
    }
}

@keyframes animation-indeterminate-short {
    0% {
        left: -80%;
        width: 80%;
    }

    100% {
        left: 110%;
        width: 10%;
    }
}
